<template>
  <a-modal
    :visible="visible"
    title="选择品牌"
    :width="1000"
    :bodyStyle="{
      padding: '10px',
      paddingBottom: '50px',
    }"
    @cancel="closeModal"
    centered
    destroyOnClose
    :footer="null"
  >
    <SelectBrandIndex
      :brandId="brandId"
      @close="closeModal"
      @costConfirm="handleOk"
    />
  </a-modal>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  onMounted,
  ref,
} from "vue";
import SelectBrandIndex from "../../CustomerBrand/SelectBrandIndex.vue";

export default defineComponent({
  name: "SelectBrandModal",
  components: { SelectBrandIndex },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    brandId: {
      type: [Number, String],
      default: 0,
    },
  },

  setup(props, { emit }) {
    const state = reactive({});
    //确定
    const handleOk = (data) => {
      emit("costConfirm", data);
    };

    //取消
    const closeModal = () => {
      emit("close");
    };

    onMounted(() => {});

    return {
      ...toRefs(state),
      handleOk,
      closeModal,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.tableStriped > td) {
  background-color: #2681f3 !important;
  color: #fff;
}

:deep(.ant-table-tbody > tr.ant-table-row:not(.tableStriped):hover > td) {
  background-color: #d3e3fd;
  color: #000;
}
:deep(.ant-table-tbody tr:nth-child(2n) td) {
  background-color: #fff;
}

.sear-width {
  width: 230px !important;
}

:deep(.ant-form-item) {
  margin: 0 !important;
}
</style>
